<template>
  <div class="add-or-update">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" v-loading="loading">
      <el-form-item label="所属部门:" prop="deptName">
        <el-popover
          v-model="popoverVisible"
          ref="deptListPopover"
          placement="bottom-start"
          trigger="click">
          <div class="selector">
            <el-tree
              :data="deptList"
              :props="array"
              node-key="id"
              ref="deptListTree"
              @current-change="deptListTreeCurrentChangeHandle"
              :default-expand-all="true"
              :highlight-current="true"
              :expand-on-click-node="false">
            </el-tree>
          </div>
        </el-popover>
        <el-input v-model="dataForm.deptName" v-popover:deptListPopover :readonly="true" placeholder="点击选择所属部门" class="menu-list__input"></el-input>
      </el-form-item>
      <el-form-item label="工号 :" prop="no">
        <el-input placeholder="请输入工号" v-model="dataForm.no">
        </el-input>
      </el-form-item>
      <el-form-item label="名称:" prop="name">
        <el-input placeholder="请输入名称" v-model="dataForm.name">
        </el-input>
      </el-form-item>
      <el-form-item label="登录名:" prop="loginName">
        <el-input placeholder="请输入登录名" v-model="dataForm.loginName">
        </el-input>
      </el-form-item>
      <el-form-item label="手机号:" prop="phone">
        <el-input placeholder="请输入手机号" v-model="dataForm.phone">
        </el-input>
      </el-form-item>
      <el-form-item label="邮箱:" prop="email">
        <el-input placeholder="请输入邮箱" v-model="dataForm.email">
        </el-input>
      </el-form-item>
      <el-form-item label="备注:" prop="remarks">
        <el-input type="textarea" placeholder="请输入备注" :rows=4 v-model="dataForm.remarks">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dataFormSubmit()">提交</el-button>
        <el-button @click="resetForm('dataForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        popoverVisible: false,
        loading: false,
        dataForm: {
          id: 0,
          no: '',
          name: '',
          loginName: '',
          phone: '',
          email: '',
          remarks: '',
          deptId: '',
          deptName: ''
        },
        dataRule: {
          parentName: [
            { required: true, message: '所属部门不能为空', trigger: 'change' }
          ],
          no: [{
            required: true, message: '工号不能为空', trigger: 'blur'
          }],
          name: [{
            required: true, message: '名称不能为空', trigger: 'blur'
          }],
          loginName: [{
            required: true, message: '登录名不能为空', trigger: 'blur'
          }],
          phone: [{
            required: true, message: '手机号不能为空', trigger: 'blur'
          }],
          email: [{
            required: true, message: '邮箱不能为空', trigger: 'blur'
          }]
        },
        deptList: [],
        counter: 0,
        array: {
          value: 'id',
          label: 'name'
        }
      }
    },
    created () {
      let id = this.$route.params.id || 0
      console.log('id', id)
      this.dataForm.id = id
      this.init(id)
    },
    methods: {
      // 根据是新增还是修改对表单中的字段进行处理
      init (id) {
        this.loading = true
        this.dataForm.id = id || 0
        console.log(this.dataForm.id)
        this.$http({
          url: this.$http.adornUrl('/sysDept/query/select'),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          this.loading = false
          this.deptList = data
        })
          .then(() => {
            if (this.dataForm.id) {
              this.loading = true
              // 修改
              this.$http({
                url: this.$http.adornUrl(`/sysUser/query/detail`),
                method: 'get',
                params: this.$http.adornParams({id: id})
              }).then(({data}) => {
                this.loading = false
                this.dataForm.id = data.id
                this.dataForm.no = data.no
                this.dataForm.name = data.name
                this.dataForm.parentId = data.parentId
                this.dataForm.loginName = data.loginName
                this.dataForm.phone = data.phone
                this.dataForm.email = data.email
                this.dataForm.remarks = data.remarks
                this.dataForm.deptId = data.deptId
                this.deptListTreeSetCurrentNode()
              })
            } else {
              // 新增时清空表单
              this.resetForm('dataForm')
            }
          })
      },
      deptListTreeSetCurrentNode () {
        this.$refs.deptListTree.setCurrentKey(this.dataForm.deptId)
        this.dataForm.deptName = (this.$refs.deptListTree.getCurrentNode() || {})['name']
      },
      // 提交表单
      dataFormSubmit () {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            this.loading = true
            this.$http({
              url: this.$http.adornUrl('/sysUser/save'),
              method: 'post',
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
              },
              data: this.$http.adornData(
                {
                  id: this.dataForm.id || undefined,
                  no: this.dataForm.no,
                  name: this.dataForm.name,
                  parentId: this.dataForm.parentId,
                  loginName: this.dataForm.loginName,
                  phone: this.dataForm.phone,
                  email: this.dataForm.email,
                  remarks: this.dataForm.remarks,
                  deptId: this.dataForm.deptId
                },
                false,
                'form'
              )
            })
              .then(() => {
                this.loading = false
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500  // 持续时间

                })
                this.$router.push({name: 'sys-user'})
              })
          }
        })
      },
      // 表单重置
      resetForm (formName) {
        this.loading = true
        this.$refs[formName].resetFields()
        this.loading = false
      },
      // 菜单树选中
      deptListTreeCurrentChangeHandle (data, node) {
        this.dataForm.deptId = data.id
        this.dataForm.deptName = data.name
        this.popoverVisible = false
      }
    }
  }
</script>
